<template>
	<div class="left-threes">
		<div class="title">环境监测</div>
		<div class="basic-info">
			<div class="time">
				<div class="time-wrap">
					<span class="nowDate">{{ nowDate }}</span>
					<span class="nowWeek">{{ nowWeek }}</span>
				</div>
				<div class="hours">{{ nowTime }}</div>
			</div>
			<div class="weather">
				<div class="info-sun">{{ rain }}</div>
				<div class="detail-sun">
					<i class="iconfont icon-qingtian" v-if="rain === '晴'"></i>
					<i class="iconfont icon-duoyun1" v-else-if="rain === '阴'"></i>
					<i class="iconfont icon-duoyun1" v-else-if="rain === '多云'"></i>
					<i class="iconfont icon-huaban" v-else-if="rain === '雨'"></i>
					<i class="iconfont icon-wu" v-else-if="rain === '雾'"></i>
					<i class="iconfont icon-xue" v-else-if="rain === '雪'"></i>
				</div>
			</div>
		</div>
		<div class="zudiandian">人类舒适度： {{basicInfo.comfort}}</div>
		<div class="qiu-wrap">
			<img class="diqiu" src="../image/diqiu.png" alt="" />
			<ul class="weather-info">
				<li class="temp">温度：{{basicInfo.weatherResponseDTO.temp}}℃</li>
				<li class="temp">湿度：{{basicInfo.humidity}}</li>
        <li class="temp">体感温度：{{basicInfo.weatherResponseDTO.feelLike}}℃</li>
        <li class="temp">含氧量：{{basicInfo.oxygen}}</li>
				<li class="temp">风向：{{basicInfo.weatherResponseDTO.windDir}}</li>
				<li class="temp">风力等级：{{basicInfo.weatherResponseDTO.windClass}}</li>
				<li class="temp">PM2.5：{{basicInfo.pM25}}</li>
				<li class="temp">PM10：{{basicInfo.pM10}}</li>
			</ul>
		</div>
	</div>
</template>

<script>
import baseUrl from '@/plugin/url'

export default {
	name: 'left-three',
	data() {
		return {
			nowWeek: '',
			nowDate: '',
			nowTime: '',
			rain: '',
			basicInfo: {}
		}
	},
	created() {
		this.getWeather()
		this.getInitialData()
		this.fixTime()
	},
	methods: {
		fixTime() {
			const self = this
			let date = new Date()
			let dayWeek = date.getDay()
			const year = date.getFullYear()
			const month = date.getMonth() + 1
			const day = date.getDate()
			this.nowDate = year + ' / ' + month + ' / ' + day + '日'
			setInterval(function() {
				let dateInterval = new Date()
				let hours = dateInterval.getHours() >= 10 ? dateInterval.getHours() : '0' + dateInterval.getHours()
				let minute = dateInterval.getMinutes() >= 10 ? dateInterval.getMinutes() : '0' + dateInterval.getMinutes()
				let seconds = dateInterval.getSeconds() >= 10 ? dateInterval.getSeconds() : '0' + dateInterval.getSeconds()
				self.nowTime = hours + ' : ' + minute + ' : ' + seconds
			}, 1000)
			switch (dayWeek) {
				case 1:
					return (this.nowWeek = '星期一')
				case 2:
					return (this.nowWeek = '星期二')
				case 3:
					return (this.nowWeek = '星期三')
				case 4:
					return (this.nowWeek = '星期四')
				case 5:
					return (this.nowWeek = '星期五')
				case 6:
					return (this.nowWeek = '星期六')
				case 0:
					return (this.nowWeek = '星期日')
			}
		},
		getWeather() {
			let url = baseUrl + '/web/api/v1/weather'
			this.$get(url).then(res => {
				this.rain = res.data.text
			})
		},
		getInitialData() {
			let url = baseUrl + '/web/api/v1/environ'
			this.$get(url).then(res => {
        this.basicInfo = res.data
			})
		}
	}
}
</script>

<style scoped lang="less">
@import '../assets/css/mixin.css';
.left-threes {
	width: 100%;
	height: 100%;
	border: 1px solid #21b5e3;
	box-sizing: border-box;
	border-radius: 6px;
	.basic-info {
		display: flex;
		justify-content: flex-start;
		margin-top: 20px;
		padding: 0 22px;
		.time {
			flex: 3;
		}
		.time-wrap {
			display: flex;
			justify-content: flex-start;
			font-size: 20px;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			.nowWeek {
				padding-left: 20px;
			}
		}
		.hours {
			font-size: 47px;
			font-weight: 400;
			color: rgba(0, 192, 255, 1);
			padding-top: 10px;
		}
		.weather {
			flex: 2;
			display: flex;
			flex-direction: column;
			align-items: center;
			.info-sun {
				font-size: 20px;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
			.iconfont {
				font-size: 55px;
				display: inline-block;
				margin-top: 15px;
			}
			.icon-qingtian {
				color: #f4ea2a;
			}
			.icon-duoyun1 {
				color: #ccc3c3;
			}
			.icon-huaban {
				color: #b3adad;
			}
			.icon-wu {
				color: #807878;
			}
			.icon-xue {
				color: #807878;
			}
		}
	}
	.zudiandian {
		display: block;
		width: calc(100% - 79px);
		height: 37px;
		margin-left: 22px;
		margin-top: 20px;
		background: url('../image/zudiandian.png') no-repeat;
		background-size: 100% 100%;
		line-height: 37px;
		padding-left: 12px;
		font-size: 20px;
		color: white;
	}
	.qiu-wrap {
		display: flex;
		justify-content: flex-start;
		padding: 20px 22px 0 22px;
		height: 53%;
		.diqiu {
			width: 263px;
			height: 268px;
		}
		.weather-info {
			height: 100%;
			padding: 0 0 15px 30px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 20px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			box-sizing: border-box;
		}
	}
}
</style>
